
document.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('.zp-input-default-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/input.js" type="module" defer></script>
<zp-input></zp-input>`,
    {language: 'xml'}
  ).value;
  document.querySelector('.zp-input-color-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/input.js" type="module" defer></script>
<zp-input
  placeholder="请输入"
  placeholder-color="#4e5d72"
  color="error"
  style="
    --zp-input-bgcolor:#151f32;
    --zp-input-border-color:#2f3b4c;
    --content:#fff;
  "
></zp-input>`,
    {language: 'xml'}
  ).value;
  document.querySelector('.zp-input-size-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/input.js" type="module" defer></script>
<zp-input></zp-input>
<zp-input size="lg"></zp-input>
<zp-input style="font-size:16.7px"></zp-input>`,
    {language: 'xml'}
  ).value;
  document.querySelector('.zp-input-fix-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/input.js" type="module" defer></script>
<zp-input>
  <span slot="prefix" class="icon">&#xe7ae;</span>
</zp-input>
<zp-input>
  <span slot="suffix">RMB</span>
</zp-input>`,
    {language: 'xml'}
  ).value;
});